<template>
    <div class="">
        news 组件

        {{ userName }}--{{ age }}

        <hr>
        <ul>
            <li v-for="item in arr">
                {{ item }}
            </li>
        </ul>
        <button @click="addArr">点击添加</button>

        <hr>
        {{ mapArrList }}
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { reactive, toRefs, ref } from "vue"

import useStore from './store/index'
// console.dir(useStore());



import { storeToRefs } from 'pinia'


export default {
    name: "",
    //import引入的组件需要注入到对象中才能使用
    components: {},
    //这里存放数据
    setup () {
        const data = reactive({})
        // const store = stores()
        // console.log(store);
        const { counter, user, list } = useStore()
        // console.log(counter);
        // console.dir(user);
        const { userName, age } = storeToRefs(user)
        console.log(userName.value, age.value);

        const { arr, mapArrList } = storeToRefs(list)

        const addArr = () => {
            list.addList('苹果')
        }
        return {
            data,
            userName,
            age,
            arr,
            addArr,
            mapArrList
        }
    }
}
</script>

<style lang="css" scoped>
</style>
